import React from 'react';
import { inject, observer} from 'mobx-react';
import {Button, Steps, Spin, Tabs, Modal,message} from 'antd';
const confirm = Modal.confirm;
const TabPane = Tabs.TabPane;
const Step = Steps.Step;
import {WeaDialog, WeaSearchGroup, WeaTools, WeaTableEdit, WeaNewScroll, WeaFormItem,WeaAlertPage,WeaTab} from 'ecCom';
import {WeaSwitch} from 'comsMobx'
import UploadAvatar from '../../../../pc4public/hrm/uploadAvatar'
import InputBtn from '../../coms/inputBtn'
import CustComp from './CustComp';
import forEach from 'lodash/forEach'
import isEmpty from 'lodash/isEmpty'
const getKey = WeaTools.getKey;
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import {i18n} from '../../public/i18n';

const verificationCode = '/weaver/weaver.file.MakeValidateCode?isView=1&validatetype=0&validatenum=4&seriesnum_=';

@inject('hrmAdd')
@observer
class Full extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            time: new Date().getTime()
        }
    }

    componentWillReceiveProps(nextProps) {
        const { hrmAdd } = this.props;
        if ('visible' in this.props && this.props.visible !== nextProps.visible) {
            if (nextProps.visible) {
                hrmAdd.current = 0;
                hrmAdd.canSave = true;
                hrmAdd.getHrmResourceAddForm();
            }
        }
    }

    componentDidMount(){
        const dom = $('<Object id="htactx" name="htactx" classid="clsid:FB4EE423-43A4-4AA9-BDE9-4335A6D3C74E" codebase="HTActX.cab#version=1,0,0,1" style="HEIGHT: 0px; WIDTH: 0px"></Object>');
        $(document.body).append(dom);
        // const {hrmAdd} = this.props;
        // const {current} = hrmAdd;
        // hrmAdd.current = 1;
    }

    pre = () => {
        const {hrmAdd} = this.props;
        const {current} = hrmAdd;
        this.refs.scrollBar.scrollerToTop();
        hrmAdd.current = current - 1;
    }

    next = () => {
        const {hrmAdd} = this.props;
        const {current} = hrmAdd;
        hrmAdd.myvalidate(()=> {
            this.refs.scrollBar.scrollerToTop();
            hrmAdd.current = current + 1;
        })
    }

    save = () => {
        const {hrmAdd} = this.props;
        hrmAdd.saveFull(this.refreshVerificationCode);
    }

    onTabChange = (key) => {
        const {hrmAdd} = this.props;
        hrmAdd.onTabChange(key);
    }

    tableEditChange = (data) => {
        const {hrmAdd} = this.props;
        hrmAdd.tableEditChange(data);
    }

    more = () => {

    }

    getBtns = () => {
        const {hrmAdd} = this.props;
        const {current,canSave} = hrmAdd;
        let btns = [];
        const pre = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x69uwc`} type="primary" disabled={!canSave} onClick={this.pre} >{i18n.button.lastStep()}</Button>;
        const next = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8ldonn`} type="primary" disabled={!canSave} onClick={this.next} >{i18n.button.nextStep()}</Button>;
        const ok = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@51q98a`} type="primary" disabled={!canSave}  onClick={this.save} >{i18n.button.done()}</Button>;
        if (current == 0) {
            btns = [next];
        } else if (current == 3){
            btns = [pre, ok];
        } else {
            btns = [pre, next];
        }
        return btns;
    }

    refreshVerificationCode = () => this.setState({time: new Date().getTime()});

    getSearchs = (current) => {
    	const {time} = this.state;
        const {hrmAdd} = this.props;
        const {formFull,conditionInfo0, conditionInfo1, conditionInfo2, conditionInfo3} = hrmAdd;
        const {isFormInit} = formFull;
        const formParams = formFull.getFormParams();
        let group = [];
        let target;
        if (current < 1) target = conditionInfo0;
        if (current === 1) target = conditionInfo1;
        if (current === 2) target = conditionInfo2;
        if (current === 3) target = conditionInfo3;
        window.e9HideFormFieldKeys = [];
        isFormInit && target && target.forEach((c, i) =>{
            let items = [];
            c.items.forEach( (field, j) => {
                let hide = false;
                let hideLabel = false;
                if (formParams.accounttype == '1' && (field.domkey[0] == 'loginid' || field.domkey[0] == 'password' || field.domkey[0] == 'password1' || field.domkey[0] == 'userUsbType') ) hide = true;
                if ((!formParams.userUsbType || formParams.userUsbType == '') && (field.domkey[0] == 'tokenKey' || field.domkey[0] == 'serial' || field.domkey[0] == 'usbstate')) hide = true;
                if (formParams.userUsbType == '4' && (field.domkey[0] == 'tokenKey' || field.domkey[0] == 'serial')) hide = true;
                if (formParams.userUsbType == '2' && field.domkey[0] == 'tokenKey') hide = true;
                if (formParams.userUsbType == '3' && field.domkey[0] == 'serial') hide = true;
                if ((!formParams.accounttype || formParams.accounttype == '0') && field.domkey[0] == 'belongto') hide = true;
                if (field.domkey[0] == 'usbstate') {
                    hideLabel = true;
                }
                let dom;
                if (field.conditionType == 'RESOURCEIMG') {
                    const key = getKey(field);
                    const bindObj = formFull.$(key);
                    dom = <UploadAvatar ecId={`${this && this.props && this.props.ecId || ''}_UploadAvatar@u0dusd@resourceImg`} {...bindObj.bind()}/>
                } else if (field.domkey[0] == 'tokenKey') {
                    const key = getKey(field);
                    const bindObj = formFull.$(key);
                    dom = <InputBtn ecId={`${this && this.props && this.props.ecId || ''}_InputBtn@4keiha@tokenKey`} btnText={i18n.label.binding()} {...bindObj.bind()} onBtnClick={hrmAdd.updateKey}/>
                } else if (field.domkey[0] == 'serial') {
                    const key = getKey(field);
                    const bindObj = formFull.$(key);
                    dom = <InputBtn ecId={`${this && this.props && this.props.ecId || ''}_InputBtn@atqw1s@serial`} btnText={i18n.label.binding()} {...bindObj.bind()} onBtnClick={hrmAdd.updateKey}/>
                } else if(field.domkey[0] == 'validatecode'){
                    dom = (
                        <div>
                            <div style={{float: 'left', width: '45%'}}>
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@lk4mhb`} fieldConfig={field} form={formFull} formParams={formParams}/>
                            </div>
                            <img style={{marginLeft: '16px'}} border="0" align='absmiddle' src={`${verificationCode}${time}`} onClick={this.refreshVerificationCode} title={i18n.label.preview()} />
                        </div>
                    )
                } else {
                    dom = <CustComp ecId={`${this && this.props && this.props.ecId || ''}_CustComq@ukb43t@custcomq`} hrmAdd={hrmAdd} fieldConfig={field} form={formFull} formParams={formParams} />;
                }
                if(c.hide || !isEmpty(field.otherParams) && field.otherParams.hide){
                    window.e9HideFormFieldKeys.push(field.domkey[0]);
                }else{
                    items.push({
                        com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4p8bz8@${j}`}
                            hideLabel={hideLabel}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            wrapperCol={{span: `${field.fieldcol}`}}>
                            {dom}
                            </WeaFormItem>,
                        colSpan: 1,
                        hide: hide
                    });
                }
            });
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@uwuq5a@${i}`}  className='hrm-center' hide={c.hide}
                        needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} col={1}/>)
        });
        return group;
    }

    getTabChildren = () => {
        const {hrmAdd} = this.props;
        const {current, tableInfo1, tableInfo2, tabkey1,tabkey2} = hrmAdd;
        let tabChildren = [];
        let target;
        let tabkey;
        if (current === 1) {
            target = toJS(tableInfo1);
            tabkey = tabkey1;
        }
        if (current === 2) {
            target = toJS(tableInfo2);
            tabkey = tabkey2;
        }

        target && target.map((t,i)=>{
            if(tabkey==i){
                tabChildren.push(
                    <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@jv99el@${i}`}
                        // title={'列表信息'}
                        // addFirstRow={true}
                        tableProps={{
                          scroll: { x: 700 }
                        }}
                        columns={t.tabinfo.columns?t.tabinfo.columns:[]}
                        datas={isEmpty(t.tabinfo.datas) ? [{}] : t.tabinfo.datas}//没有数据默认添加一行，使用addFirstRow属性在这个页面有问题。
                        onChange={this.tableEditChange}
                    />
                );
            }
        })
        return tabChildren;
    }

    render() {
        const {hrmAdd} = this.props;
        const {visible, title, current, loading, conditionInfo1,conditionInfo2,conditionInfo3,tabInfo1,tabInfo2,tabkey1,tabkey2} = hrmAdd;
        let dialogHeight = window.innerHeight-250;
        if(dialogHeight>660)dialogHeight = 660;
        return <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@akev30`}
                {...this.props}
                closable
                className="hrm-addfull"
                style={{width: 800, height: dialogHeight}}
                title = {title()}
                icon="icon-coms-hrm"
                iconBgcolor='#217346'
                buttons = {this.getBtns()}
                moreBtn={{datas: []}}
            >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@vgga5o`} spinning={loading}>
                    <Steps ecId={`${this && this.props && this.props.ecId || ''}_Steps@np68cr`} current={current} className="step-wrapper">
                        <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@ytdmss`} description={i18n.label.fillBasicInfo()} />
                        <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@clngpy`} description={i18n.label.fillPrivateInfo()} />
                        <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@yp8iih`} description={i18n.label.fillWorkInfo()} />
                        <Step ecId={`${this && this.props && this.props.ecId || ''}_Step@kgl9jl`} description={i18n.label.fillSysInfo()} />
                    </Steps>
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@hu2rk8`} height={dialogHeight-120} ref="scrollBar">
                        <div className={`${current < 1? 'wea-show': 'wea-hide'}`}>
                            {this.getSearchs(0)}
                        </div>

                        <div className={`${current === 1? 'wea-show hrm-add-detial-tabs': 'wea-hide hrm-add-detial-tabs'}`}>
                            {!isEmpty(conditionInfo1)?
                            <div>
                                {this.getSearchs(1)}
                                {
                                    !isEmpty(tabInfo1) && <div>
                                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@8k8ibm`}
                                        type='card'
                                        keyParam='key'
                                        datas={toJS(tabInfo1)}
                                        selectedKey={tabkey1}
                                        onChange={hrmAdd.updateTabkey}
                                        />
                                        {this.getTabChildren()}
                                        </div>
                                }
                            </div>:
                            <div>
                                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@at8vdt`}>
                                    <div style={{color : '#000'}}>
                                        {i18n.message.fillPrivateInfoAlarm()}
                                    </div>
                                </WeaAlertPage>
                            </div>
                            }
                        </div>

                        <div className={`${current === 2? 'wea-show hrm-add-detial-tabs': 'wea-hide hrm-add-detial-tabs'}`}>
                            {!isEmpty(conditionInfo2)?
                            <div>
                                {this.getSearchs(2)}
                                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@vswx9n`}
                                    type='card'
                                    keyParam='key'
                                    datas={toJS(tabInfo2)}
                                    selectedKey={tabkey2}
                                    onChange={hrmAdd.updateTabkey}
                                />
                                {this.getTabChildren()}
                            </div>:
                            <div>
                                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@5c5zei`}>
                                    <div style={{color : '#000'}}>
                                    {i18n.message.fillWorkInfoAlarm()}
                                    </div>
                                </WeaAlertPage>
                            </div>
                            }
                        </div>

                        <div className={`${current === 3? 'wea-show': 'wea-hide'}`}>
                            {!isEmpty(conditionInfo3)?
                            <div>
                               {this.getSearchs(3)}
                            </div>:
                            <div>
                                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@iz74wf`}>
                                    <div style={{color : '#000'}}>
                                    {i18n.message.fillSysInfoAlarm()}
                                    </div>
                                </WeaAlertPage>
                            </div>
                            }
                        </div>
                    </WeaNewScroll>
                </Spin>

            </WeaDialog>
    }
}

export default Full